<template>
	<view>
		<custom-nav :title="'OA审批'"></custom-nav>
		<view class="container">
			<view>
				<view>
					<!-- 审批列表 -->
					<view class="df ac jsc f36 mt30 pb20 pl20 pr20">
						<view
							class="df ac fdc flex-1"
							v-for="item in delaltList"
							:key="item.id"
							@tap="jumpTab(item)"
						>
							<uni-badge
								class="uni-badge-left-margin"
								:text="item.number"
								max-num="99"
								absolute="rightTop"
								size="normal"
								:offset="[10, 6]"
								v-if="item.number > 0"
							>
								<view class="flex-column">
									<image
										:style="
											'width:' +
											item.width +
											'rpx' +
											';' +
											'height:' +
											item.height +
											'rpx'
										"
										:src="item.icon"
									></image>
									<view
										class="g3 f28"
										style="margin-top: 5rpx"
										>{{ item.text }}</view
									>
								</view>
							</uni-badge>
							<view v-if="!item.number" class="flex-column">
								<image
									:style="
										'width:' +
										item.width +
										'rpx' +
										';' +
										'height:' +
										item.height +
										'rpx'
									"
									:src="item.icon"
								></image>
								<view class="g3 f28" style="margin-top: 5rpx">{{
									item.text
								}}</view>
							</view>
						</view>
					</view>
					<view>
						<!-- 常用功能 -->
						<view
							v-if="
								myCommonFunction && myCommonFunction.length > 0
							"
							class="group mb20 backf box"
						>
							<view class="group-title mb40 pl20">常用功能</view>
							<view class="group-container df flex-wrap">
								<view
									class="group-item df fdc ac w25 mb20"
									v-for="(item, inx) in myCommonFunction"
									:key="inx"
									@click="enterItem(item)"
								>
									<view
										class="background-icon"
										:style="
											'background: ' +
											item.logo.background
										"
									>
										<view class="icon-cont">
											<uni-icons
												color="#fff"
												custom-prefix="iconfont"
												:type="`${item.logo.icon.replace(
													'el-',
													''
												)}`"
												size="30"
											></uni-icons>
										</view>
									</view>
									<view class="item-name">{{
										item.formName
									}}</view>
								</view>
							</view>
						</view>

						<!-- 列表功能 -->
						<view
							class="group mb20 backf box"
							v-for="(group, index) in formList.list"
							:key="index"
							v-show="group.items.length > 0 && group.id > 0"
						>
							<view class="group-title mb40 pl20">{{
								group.name
							}}</view>
							<view class="group-container df flex-wrap">
								<view
									class="group-item mb20 df fdc ac w25"
									v-for="(item, inx) in group.items"
									:key="inx"
									@click="enterItem(item)"
								>
									<view
										class="background-icon"
										:style="
											'background: ' +
											item.logo.background
										"
									>
										<view class="icon-cont">
											<uni-icons
												color="#fff"
												custom-prefix="iconfont"
												:type="`${item.logo.icon.replace(
													'el-',
													''
												)}`"
												size="28"
											></uni-icons>
										</view>
									</view>
									<view class="item-name">{{
										item.formName
									}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			pagePath: '/subPackagesIndex/pages/index/approval/index',
			formList: {
				list: [],
			},
			delaltList: [
				{
					id: 1,
					text: '待处理',
					icon: 'https://yilife-oss-dev-public.oss-cn-hangzhou.aliyuncs.com/34/130595/ORG/yi7ahb9sduvt09uvkobsqgcw6.png',
					width: 60,
					height: 60,
					number: 0,
				},
				{
					id: 2,
					text: '已处理',
					icon: 'https://yilife-oss-dev-public.oss-cn-hangzhou.aliyuncs.com/34/130595/ORG/hyzgcqyy4p8v8ihtjy1111tsg.png',
					width: 60,
					height: 60,
				},
				{
					id: 3,
					text: '我发起',
					icon: 'https://yilife-oss-dev-public.oss-cn-hangzhou.aliyuncs.com/34/130595/ORG/6yzkmhvkd5pj2l24yyd0bkhxb.png',
					width: 60,
					height: 60,
				},
				{
					id: 4,
					text: '关于我的',
					icon: 'https://yilife-oss-dev-public.oss-cn-hangzhou.aliyuncs.com/34/130595/ORG/xnm4ul8vp2pglfmmuqpvbmw3d.png',
					width: 58,
					height: 58,
					number: 0,
				},
			],
			myCommonFunction: [],
			navHeight: 0, //导航栏总体高度
			approvalNumber: 0,
		}
	},
	mounted() {
		this.navHeight = uni.getStorageSync('navHeight')
		this.getGroupModels()
		this.getMyCommonFunction()
		this.getInstanceCount()
	},
	methods: {
		getMyCommonFunction() {
			this.$request
				.request('wflow/wflow/home/getMyCommonFunction', {
					data: {},
				})
				.then((res) => {
					if (res) {
						this.myCommonFunction = res
						this.myCommonFunction &&
							this.myCommonFunction.length > 0 &&
							this.myCommonFunction.forEach((item) => {
								item.logo = JSON.parse(item.logo)
							})
					}
				})
		},
		getInstanceCount() {
			this.$request
				.request('wflow/wflow/home/getCornerMarkCount', {
					data: {},
				})
				.then((res) => {
					this.delaltList[0].number = res.todo
					this.delaltList[3].number = res.cc
					this.approvalNumber = res.todo + res.cc
				})
		},
		getGroupModels() {
			uni.showLoading({
				title: '加载中...',
			})
			this.$request
				.request('wflow/wflow/model/list/byUser', {
					data: {},
				})
				.then((rsp) => {
					uni.hideLoading()
					this.formList.list = rsp
					this.formList.list &&
						this.formList.list.length > 0 &&
						this.formList.list.forEach((group) => {
							if (
								group.groupTypeVOS &&
								group.groupTypeVOS.length > 0
							) {
								group.items.push({
									logo: {
										icon: 'iconfont icon-mn_xiuxi',
										background: '#1e90ff',
									},
									formName: '用印',
									type: 'seal',
								})
							}
							group.items.forEach((item) => {
								item.logo =
									typeof item.logo == 'string'
										? JSON.parse(item.logo)
										: item.logo
							})
						})
					this.formList.list = this.formList.list.filter(
						(i) => i.name !== '其他'
					)
				})
		},
		enterItem(row) {
			if (row.type) {
				uni.navigateTo({
					url: `/subPackagesIndex/pages/index/seal/useSeal`,
				})
			} else {
				uni.navigateTo({
					url: `/subPackagesIndex/pages/index/approval/launch/launchApproval?code=${row.formId}`,
				})
			}
		},
		jumpTab(value) {
			this.$emit('changeActive', {
				approvalActive: value.id,
				pagePath: 'approvalCenter',
			})
			// uni.navigateTo({
			//   url: `/subPackagesIndex/pages/index/approval/index?approvalActive=${value.id}&pagePath=approvalCenter`,
			// });
		},
	},
}
</script>
<style scoped lang="scss">
.container {
	padding: 10rpx 0rpx 160rpx;
	font-size: 36rpx;
	background-color: #f5f5f5;
}
.box {
	padding: 30rpx 20rpx;
	padding-bottom: 0;
}
.background-icon {
	width: 86rpx;
	height: 86rpx;
	border-radius: 10rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.icon-cont {
		height: 86rpx;
		line-height: 86rpx;
	}
}
.item-name {
	font-size: 26rpx;
	color: #666;
	max-width: 80px;
	margin-top: 8px;
	text-align: center;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.img-item {
	width: 60rpx;
	height: 60rpx;
}
.swiper-box {
	height: 282rpx;
	margin-top: -10rpx;
	margin-bottom: 10px;
}
.swiper-item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 282rpx;
	color: #fff;
	image {
		border-radius: 20rpx;
		width: 100%;
	}
}
.common-f {
	padding: 40rpx;
}
.train-box {
	height: 108rpx;
	line-height: 108rpx;
	padding: 0 30rpx;
	.train-name {
		font-weight: 700;
	}
	.button-radius {
		border-radius: 40rpx;
		width: 130rpx;
	}
}
.popup-bdf {
	background: #fff;
	border-radius: 0 0 20rpx 20rpx;
}
.warning-text {
	border-radius: 10px 10px 10px 10px;
	background-color: rgba(64, 158, 255, 0.07);
	padding: 16rpx;
	color: #5385fc;
	font-size: 30rpx;
}
.item-content {
	border-top: 2rpx solid #ccc;
	padding: 20rpx;
	max-height: 600rpx;
	overflow-y: auto;
	.item {
		color: #101010;
		font-size: 34rpx;
		height: 90rpx;
		line-height: 90rpx;
		padding-right: 30rpx;
		padding-left: 20rpx;
	}
}
.active {
	border-radius: 10px 10px 10px 10px;
	background-color: rgba(239, 239, 239, 0.5);
}
.flex-column {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.switch-button {
	border: 1px solid rgba(58, 116, 252, 1);
	border-radius: 60rpx;
	height: 60rpx;
	width: 150rpx;
	color: #3a74fc;
	font-size: 30rpx;
	line-height: 60rpx;
	.switch-icon {
		width: 30rpx;
		height: 30rpx;
		line-height: 40rpx;
		padding-right: 5rpx;
		position: relative;
		top: 5rpx;
	}
}

.box-border {
	border-radius: 20rpx;
	margin: 100rpx 50rpx 0;
	/deep/ .item-content {
		border-top: 0;
	}
}
</style>
